import React from "react";

interface StatsCardProps {
  title: string;
  total: number;
  newCustomerCount: number;
  platformA: string;
  platformAValue: number;
  platformB: string;
  platformBValue: number;
  bgColor: string;
}

const StatsCard: React.FC<StatsCardProps> = ({
  title,
  total,
  newCustomerCount,
  platformA,
  platformAValue,
  platformB,
  platformBValue,
  bgColor,
}) => {
  return (
    <div
      className={`p-2 h-40 w-100 m-auto rounded shadow-md ${bgColor} text-white`}
    >
      <div className="text-3 mb-2">{title}</div>
      <div className="h-0.1 bg-white m-r-2"></div> {/* 白色竖线 */}
      <div className="flex">
        <div className="flex-1  m-auto display-block text-center">
          <div className="text-7 font-bold">{total}</div>
          <div>新增客户: {newCustomerCount}</div>
        </div>
        <div className="w-0.1  bg-white mx-10"></div> {/* 白色竖线 */}
        <div className="flex-1">
          <div className="text-xl">{platformAValue}</div>
          <div className="text-sm">{platformA}</div>
          <div className="text-xl mt-2">{platformBValue}</div>
          <div className="text-sm">{platformB}</div>
        </div>
      </div>
    </div>
  );
};

export default StatsCard;
